<template>
  <div class="box">
    <van-nav-bar title="关联患教视频"
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="@/assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>

    <!-- 搜索 -->
    <van-search v-model="parameter.keyword"
                shape="round"
                @search="onSearch"
                show-action
                background="#FFFFFF"
                placeholder="搜索">
        <template #action>
          <div class="search-btn" @click="onSearch">搜索</div>
        </template>
    </van-search>
    <!-- list 下拉刷新开始 -->
    <van-pull-refresh style="min-height: 70vh;"
                      v-model="refreshing"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :immediate-check="true"
                :finished="finished"
                finished-text="END"
                @load="getData">
        <div class="list">
          <div class="item"
               :key="ins"
               v-for="(i, ins) in list"
               @click="show(i)">
            <img class="v_img"
                 src="@/assets/img/guankan.png"
                 alt="">
            {{i.video_name}}
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 弹出层 -->
    <van-popup v-model="yihuShow"
               :closeable="closeable">
      <div class="item">
        <div class="title">{{videoInfo.video_name}}</div>
        <video class="video"
               ref="video"
               preload
               controls
               poster="@/assets/img/video.png"
               :src="$baseUrl + videoInfo.video_file"></video>
      </div>
      <button class="btn"
              @click="bindVideo(videoInfo.id)">
        关联
      </button>
    </van-popup>
  </div>
</template>
<script>
import { teachVideoList, bindVideo } from '@/api/medical'
export default {
  data () {
    return {
      values: '',
      yihuShow: false,
      closeable: true,
      videoInfo: {}, // 弹出框视频数据

      refreshing: false,
      loading: false,
      finished: false,
      list: [],
      parameter: {
        page_index: 0,
        page_size: 20,
        keyword: ''
      }
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  watch: {
    yihuShow (newV) {
      if (newV === false) {
        this.$refs.video.pause() // 弹框关闭暂停视频
      }
    }
  },
  methods: {
    onSearch () {
      this.parameter.page_index = 0
      this.finished = false
      this.loading = true
      this.list = []
      this.getData()
    },
    // 下拉刷新
    onRefresh () {
      // TODO 刷新一定要重置页码
      this.parameter.page_index = 0
      this.finished = false
      this.loading = true
      this.getData()
    },
    //  搜索患教视频列表
    async getData () {
      // TODO TEST vant-list 分页逻辑
      this.parameter.page_index += 1
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      const { data, code, msg } = await teachVideoList(this.parameter)
      this.loading = false
      if (code !== 1) {
        this.finished = true
        return this.$toast.fail(msg)
      }
      if (this.parameter.page_index === 1) this.list = []
      this.list.push(...data.data || [])
      if (this.list.length >= data.total) {
        this.finished = true
      }
    },
    show (info) {
      this.yihuShow = true
      this.videoInfo = info
    },
    // 关联患教视频
    async bindVideo (video_id) {
      const { code, msg } = await bindVideo({ video_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('关联成功')
      this.yihuShow = false
      const _userInfo = this.userInfo
      _userInfo.teach_video = '3'
      this.$store.commit('SET_USER_INFO', _userInfo)
    }
  }
}
</script>
<style scoped lang='less'>
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box {
  width: 100%;
  /deep/.van-search {
    margin-top: 40px;
  }
  /deep/.van-search__content {
    border: 1px solid #3f78f9;
  }
  /deep/.van-icon-search {
    color: #3f78f9;
  }
  /deep/.van-field__control {
    color: #3f78f9;
  }
  ::placeholder {
    color: #3f78f9 !important;
  }
  .search-btn {
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    color: #ffffff;
    border-radius: 20px;
  }
  .list {
    width: 100%;
    margin-top: 8px;
    .item {
      width: 100%;
      padding: 10px 0 10px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #161616;
      .v_img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
  /deep/.van-popup {
    width: 70%;
    height: 244px;
    border-radius: 8px;
    .item {
      width: 100%;
      padding: 6px 20px;
      margin-top: 30px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        text-align: center;
        line-height: 22px;
        color: #161616;
      }
      .video {
        width: 80%;
        height: 96px;
        margin: 8px 10%;
      }
    }
    .btn {
      width: 40%;
      height: 32px;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      border-radius: 16px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 20px;
      color: #ffffff;
      letter-spacing: 1.8px;
      border: none;
      margin-left: 30%;
    }
  }
}
</style>
